<template>
      <div>
            <span>new</span>
            <el-table
                  stripe
                  :data="dataTable">
                  <el-table-column
                        prop="date"
                        label="日期">
                  </el-table-column>
                  <el-table-column
                        prop="date"
                        label="日期">
                  </el-table-column>
                  <el-table-column
                        prop="date"
                        label="日期">
                  </el-table-column>
                  <el-table-column
                        prop="date"
                        label="日期">
                  </el-table-column>
                  <el-table-column
                        prop="date"
                        label="日期">
                  </el-table-column>
                  <el-table-column
                        prop="date"
                        label="日期">
                  </el-table-column>
                  <el-table-column
                        prop="date"
                        label="日期">
                  </el-table-column>
                  <el-table-column
                        prop="date"
                        label="日期">
                  </el-table-column>
            </el-table>
      </div>
      <!-- <div>
            <div class="row">
                  <div class="col-xs-12 tableId" >
                        <table :id='"tbData"+elementId' class="display" cellspacing="0" width="100%"></table>
                  </div>
            </div>
            <div class="row" style="margin-top:10px;">
                  <div class="col-xs-12">
                        <select class="form-control" style="width:200px;" v-model="chartType">
                              <option value="idc">继续</option>
                              <option value="sc">离反</option>
                              <option value="scc">新规</option>
                              <option value="sa">店铺离反</option>
                              <option value="saa">店铺新规</option>
                        </select>
                  </div>
            </div>
            <div class="row">
                  <div class="col-xs-12" :id='"chartParent"+elementId'>
                        <div :id='"mainchart"+elementId' class="mainChartClass" style="height:340px;width:calc(100vw - 380px);min-width:900px;"></div>
                  </div>
            </div>
      </div> -->
</template>
<script>
export default {
      props:{
            result:{
                  type:Array
            }
      },
      data:function(){
            return {
                  tableData:[],
                  dataTable:[
                        {
                              date: '201906-201907',
                              new: '17985',
                              newRate: '17.5%',
                              keep: '26788',
                              keepRate: '24.3%',
                              leaveReturn: '5769',
                              leaveReturnRate: '4.3%',
                              tenNew: '36789',
                              tenLeaveReturn: '21478',
                              H: '170',
                              HRate: '0.053%',
                              M: '5789',
                              MRate: '0.35%',
                              L: '17653',
                              LRate: '13.5%'
                        }
                  ],
                  chartData:[],
                  yAxisTitle:[],
                  chartType:'idc',
                  elementId:Math.floor(Math.random() * 1000)
            };
      },
      watch:{
            result(newValue){
                  if( newValue !== undefined && JSON.stringify(newValue) !== '{}'){
                        this.tableData = this.result;
                        window.$('#tbData'+this.elementId).DataTable().clear().rows.add(this.tableData).draw();
                        //拿取图表的y轴数据
                        var index = this.result.length - 1;
                        for (index; index >= 0 ; index--) {
                              this.yAxisTitle.push(this.result[index][0]); 
                        }
                        this.initChart();
                        if(this.tableData.length <= 5){
                              window.$('.tableId tr:nth-child(3)').css('background-color','#ffd466 !important');
                              window.$('.tableId tr:nth-child(4)').css('background-color','#78b3c2 !important');
                              window.$('.tableId tr:nth-child(5)').css('background-color','#78c5f4 !important');
                        }else{
                              window.$('.tableId tr:nth-child(4)').css('background-color','#ffd466 !important');
                              window.$('.tableId tr:nth-child(5)').css('background-color','#78b3c2 !important');
                              window.$('.tableId tr:nth-child(6)').css('background-color','#78c5f4 !important');
                              window.$('.tableId tr:nth-child(7)').css('background-color','#7894cc !important');
                              window.$('.tableId tr:nth-child(8)').css('background-color','#ff7e7e !important');
                              window.$('.tableId tr:nth-child(9)').css('background-color','#ff6933 !important');
                              window.$('.tableId tr:nth-child(10)').css('background-color','#7889ad !important');

                        }
                  }else{
                        this.yAxisTitle = [];
                        this.chartType = 'idc';
                        window.$('#tbData'+this.elementId).DataTable().clear().draw();
                        window.$('#chartParent'+this.elementId).empty();
                        var html = '<div id="mainchart'+this.elementId+'" class="mainChartClass" style="height:340px;width:calc(100vw - 380px);min-width:900px;"></div>';
                        window.$('#chartParent'+this.elementId).append(html);
                  }
            },
            chartType(){
                  if(this.result !== undefined){
                        this.initChart();
                  }
            }
      },
      methods:{
            initTable(){
                  window.$('#tbData'+this.elementId).DataTable({
                        data:this.tableData,
                        searching: false,
                        paging: false,
                        ordering: false,
                        info: false,
                        language:{emptyTable:'データなし'},
                        columns: [
                              { title: 'グループ', width: '10%' },
                              { title: 'ID数', className: 'alignright', width: '8%'  },
                              { title: '構成比', className: 'alignright', width: '7%' },
                              { title: '期間比', className: 'alignright', width: '7%' },
                              { title: '購入点数', className: 'alignright', width: '8%' },
                              { title: '期間比', className: 'alignright', width: '7%' },
                              { title: '1人あたり購入点数', className: 'alignright', width: '11%' },
                              { title: '期間比', className: 'alignright', width: '7%' },
                              { title: '金額(千円)', className: 'alignright', width: '10%' },
                              { title: '期間比', className: 'alignright', width: '7%' },
                              { title: '1人あたり金額(円)', className: 'alignright', width: '11%' },
                              { title: '期間比', className: 'alignright', width: '7%' }
                        ]
                  });
            },
            initChart(){
                  var map = {'idc':1,'sc':4,'scc':6,'sa':8,'saa':10};
                  var idOfValue = {'idc':'ID数','sc':'購入点数','scc':'1人あたり購入点数','sa':'金額(千円)','saa':'1人あたり金額(円)'};
                  var typeIndex = map[this.chartType];
                  var chartData = [];
                  var index = this.result.length - 1;
                  for (index; index >= 0 ; index--) {
                        var chartValue = this.result[index][typeIndex];
                        chartData.push(chartValue.replace(/,/g,''));
                  }
                  var myChart = this.$echarts.init(document.getElementById('mainchart'+this.elementId));
                  var myOption = {
                        tooltip: {},
                        color: '#61a0a8',
                        xAxis: {},
                        yAxis: {
                              type: 'category',
                              data: this.yAxisTitle
                        },
                        grid: {
                              left: 150,
                              top: 15,
                              bottom: 40
                        },
                        series: [{
                              name: idOfValue[this.chartType],
                              type: 'bar',
                              data:chartData
                        }]
                  };
                  myChart.setOption(myOption);
                  global.echartsObjArray.push(myChart);
            }
      },
      mounted(){
            this.tableData = [];
            this.initTable();
      }
};
</script>
<style scoped>

</style>